import React, { useState } from 'react';
import { Menu } from 'antd';
// 引入二级路由
import { homeRoutes } from '@/routes/RouterConfig'
import type { GetProp, MenuProps } from 'antd';
import { NavLink } from 'react-router-dom';
import { RouteList } from '@/type'
type MenuTheme = GetProp<MenuProps, 'theme'>;
type MenuItem = GetProp<MenuProps, 'items'>[number];

function getItem(
    label: React.ReactNode,
    key?: React.Key | null,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}
const renderRoutes = (arr: RouteList) => {
    let items: any = []
    arr && arr.forEach((item: any, index: any) => {
        items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, index, <img src={item.icon}></img>))
    })
    return items
}
function SiderIndex() {
    const [mode] = useState<'vertical' | 'inline'>('inline');
    const [theme] = useState<MenuTheme>('light');
    return (
        <Menu
            style={{ width: '100%', height: '100%', background: '#fff', color: '#1f1f1f' }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode={mode}
            theme={theme}
            items={renderRoutes(homeRoutes)}
        />
    );
}
export default SiderIndex
